<%@ include file="../include/import.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
<jsp:include page="../include/htmlhead.jsp"/>
</head>
<body>
<jsp:include page="../include/headbody.jsp"/>
<jsp:include page="../home/leftnav.jsp"/>
<div id="content">
	<div id="content-header">
		<h1>Dashboard</h1>
	</div>
	<div id="breadcrumb">
		<a href="main.sw" title="Go to Home" class="tip-bottom"><i class="icon-home"></i>Home</a>
		<a href="#" class="current">Dashboard</a>
	</div>
	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span12">
				<div class="widget-box">
					<div class="widget-title">
						<span class="icon"><i class="icon-th"></i></span>
						<h5>Usage Statistic</h5>
					</div>
					<div class="widget-content">
						<div class="sessioncount"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span12">
				<div class="widget-box">
					<div class="widget-title">
						<span class="icon"><i class="icon-th"></i></span>
						<h5>Traffic Data Statistic</h5>
					</div>
					<div class="widget-content">
						<div class="datatraffic"></div>
					</div>
				</div>
			</div>
		</div>
		<jsp:include page="../include/copyright.jsp"/>
	</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
	var d0=[], d1=[],d2=[];
	var kb = 1024, mb = kb*1024, gb = mb*1024;
<c:forEach items="${drList}" var="dr" varStatus="drStatus">
	d0.push(${dr.sessionCount});
	d1.push(${dr.inputOctet});
	d2.push(${dr.outputOctet});
</c:forEach>
	
    $(".sessioncount").highcharts({
    	chart: {
            type: 'column'
        },title: {
            text: 'Daily Number of Sessions'
        },tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:0f}</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },xAxis: {
            type: 'datetime',
            maxZoom: 14 * 24 * 3600000, // fourteen days
            title: {
                text: null
            }
        },yAxis: {
            title: {
                text: 'Number of Session'
            }
        },series: [{
        	 name: 'Number of Session',
        	 pointInterval: 24 * 3600 * 1000,
        	 pointStart: ${drList[0].recordDate.time + 24 * 3600000}, // add 1 day as timezone workaround
        	 data: d0
         }]
    });
    $(".datatraffic").highcharts({
    	chart: {
            type: 'column'
        },title: {
            text: 'Data Traffic'
        },plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },xAxis: {
            type: 'datetime',
            maxZoom: 14 * 24 * 3600000, // fourteen days
            title: {
                text: null
            }
        },yAxis: {
            title: {
                text: 'Data Traffic'
            },
            labels: {
            	formatter: function() {
            	    var maxElement = this.axis.max;
            	    if (maxElement > gb) {
            	        return (this.value / gb).toFixed(1) + " GB";
            	    } else if (maxElement > mb) {
            	        return (this.value / mb).toFixed(1) + " MB";
            	    } else if (maxElement > kb) {
            	        return (this.value / kb).toFixed(1) + " KB";
            	    } else {
            	        return (this.value) + " B";
            	    }
            	}
            }
        },series: [{
	       	 name: 'Upload',
	    	 pointInterval: 24 * 3600 * 1000,
	    	 pointStart: ${drList[0].recordDate.time + 24 * 3600000},// add 1 day as timezone workaround
	    	 data: d1
	     },{
	       	 name: 'Download',
	    	 pointInterval: 24 * 3600 * 1000,
	    	 pointStart: ${drList[0].recordDate.time + 24 * 3600000},// add 1 day as timezone workaround
	    	 data: d2
	     }]
    });
});
</script>
<jsp:include page="../include/footerscript.jsp"/>
</body>
</html>